<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { useControllerStore } from '../Controller/Controller';
import { Canvas } from './Canvas';
import { createCanvas } from './createCanvas'

const canvas = ref<HTMLCanvasElement>()
let App: Canvas;
onMounted(() => {
    App = createCanvas(canvas.value!)

    nextTick(() => {
        App.layerManager.updateAllLayer()
    })
})
onUnmounted(() => {
    App.destroy()
    useControllerStore().$reset()
})

</script>

<template>
    <div class="h-full w-full">
        <canvas ref="canvas"></canvas>
    </div>
</template>

<style scoped>
</style>
